<template>
  <div class="container-big wing-blank forward-give-page">
    <div class="forward-give-desc">
      <p>成功发起转赠后系统将生成转赠激活码，发送短信至您预留的受赠人手机号。</p>
      <!-- 规定日期 -->
      <p>请双方务必在2019年9月23日点前完成转赠-激活流程，以免逾期失效</p>
      <p>
        其他详细内容可阅读 <router-link :style="[{color:$store.state.themeColor}]" to="/forward/agreement">
          《转赠规则》
        </router-link>
      </p>
    </div>
    <co-list form>
      <co-list-item>
        <span class="forward-give-form-label">
          姓名
        </span>
        <co-input slot="right" v-model.trim="name" placeholder="请输入受赠人姓名" />
      </co-list-item>
      <co-list-item>
        <span class="forward-give-form-label">
          手机号 +86
        </span>
        <co-input slot="right" v-model.trim="mobile" placeholder="请输入受赠人手机号" />
      </co-list-item>
    </co-list>
    <co-button block :disabled="!canForward" :loading="processing" color="primary" class="forward-give-submit" @click.stop="forward()">
      发起转赠
    </co-button>
  </div>
</template>
<script>
import services from "@/api/forward";
export default {
  data() {
    return {
      query: {}, //上一页面数据
      canForward: false, // 是否能发起转赠
      name: "",
      mobile: "",
      processing: false
    };
  },
  mounted() {
    const { activityId, ticketId, ticketTypeId, isPay } = this.$route.query;
    this.query = {
      ...this.$route.query
    };
    if ((!activityId || !ticketId || !ticketTypeId, !isPay)) {
      this.$toast("必要参数缺失");
      return;
    } else {
      this.canForward = true;
    }
  },
  methods: {
    // 提交转赠
    async forward() {
      const isValidateOK = this.validateFormData();
      if (!isValidateOK) return;

      const isConfirm = await this.confirmGiving();
      if (!isConfirm) return;
      await this.forwardCommit();
    },
    // 简单检验表单值
    validateFormData() {
      if (!this.name) {
        this.$toast("请输入受赠人姓名");
        return false;
      }
      if (!/^\d{11}$/.test(this.mobile)) {
        this.$toast("请输入合法的手机号(仅支持中国地区的手机号)");
        return false;
      }
      return true;
    },
    // 二次确认弹窗
    confirmGiving() {
      return this.$confirm(
        `您确认将票转赠给用户: ${this.name} - ${this.mobile} 吗?`,
        {
          title: "转赠确认",
          okLabel: "确认",
          cancelLabel: "取消",
          showCancel: true
        }
      );
    },
    // 提交转赠
    async forwardCommit() {
      const { activityId, ticketId, ticketTypeId, isPay } = this.query;
      this.processing = true;
      const res = await services.givingTicket({
        corpId: sessionStorage.getItem("corpId"),
        uName: this.name,
        uTel: this.mobile,
        countryCode: "86",
        activityId,
        ticketId,
        ticketTypeId,
        isPay
      });
      this.processing = false;
      if (res.success) {
        this.$toast("转赠成功");
        this.$router.replace({
          path: "/forward/give/detail",
          query: {
            ...res.data,
            ...this.query
          }
        });
      }
    }
  }
};
</script>
<style lang="less">
.forward-give-page {
  text-align: left;
  .forward-give-desc {
    padding-top: 35px;
    padding-bottom: 40px;
    font-size: 24px;
    color: #fff;
    > p {
      margin-top: 10px;
      &:first-child {
        margin-top: 0;
      }
    }
  }

  .forward-give-form-label {
    width: 152px;
  }

  .forward-give-submit {
    margin-top: 30px;
    border-radius: 2px;
    height: 96px;
  }
}
</style>
